<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <link rel="stylesheet" href="./../layui/css/layui.css" media="all">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=ouzH2yPmscyPympLLM1Azii2HLXOyjUy"></script>
    <script src="./../layui/layui.js"></script>
    <script src="./../js/jquery-1.8.3.min.js"></script>
    <script src="./../js/env.js"></script>
    <title>地图展示</title>
</head>
<body>
<div id="allmap">

</div>
</body>
</html>
<script>
    if (getParam("flag") == 1) {
        //控制跳出ifream框架
        if (window != top) {
            top.location.href = location.href
        }

    }

</script>
<script type="text/javascript">
    // 百度地图API功能
    layui.use('form', function () {
        if (getParam("flag") != 1) {
            layui.layer.confirm('是否打开全屏模式?', {icon: 6, title: '提示'}, function (index) {
                //do something
                window.open("./map.html?flag=1");
            });
        }else{
            layer.msg("单击进入全屏模式，按下ESC键退出全屏模式。");
        }
    });

    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(110.441245, 34.305277), 6);  // 初始化地图,设置中心点坐标和地图级别
    map.setMapType(BMAP_HYBRID_MAP);
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    map.setCurrentCity("西安");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // 覆盖区域图层测试
    map.addTileLayer(new BMap.PanoramaCoverageLayer());

    var stCtrl = new BMap.PanoramaControl(); //构造全景控件
    stCtrl.setOffset(new BMap.Size(40, 40));
    map.addControl(stCtrl);//添加全景控件

    //监听单机全屏操作
    map.addEventListener("click", function(e){
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
        if (rfs) {
            rfs.call(el);
        } else if (typeof window.ActiveXObject !== "undefined") {
            //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }

    });

    //参数不等于1 的时候 显示大屏按钮
    if (getParam("flag") != 1) {
        // 定义一个控件类,即function
      /*  function ZoomControl() {
            // 默认停靠位置和偏移量
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        // 通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMap.Control();

        // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
        // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
        ZoomControl.prototype.initialize = function (map) {
            // 创建一个DOM元素
            var div = document.createElement("button");
            // 添加文字说明
            div.appendChild(document.createTextNode("全屏"));
            // 设置样式
            div.style.cursor = "pointer";
            div.style.border = "2px solid gray";
            div.style.backgroundColor = "white";
            // 绑定事件, 新打开窗口
            div.onclick = function (e) {
                window.open("./map.html?flag=1");
            }
            // 添加DOM元素到地图中
            map.getContainer().appendChild(div);
            // 将DOM元素返回
            return div;
        }
        // 创建控件
        var myZoomCtrl = new ZoomControl();
        // 添加到地图当中
        map.addControl(myZoomCtrl);*/
    }


    var respones = MyAjax('GET', "/admin/chargeStation/selectAllChargingStations", {}, getToken());
    var charges = [];
    if (respones.code === 0) {
        charges = respones.data.list;
    }
    for (var i = 0; i < charges.length; i++) {
        var point = new BMap.Point(charges[i].longitude, charges[i].dimensionality);
        addMarker(point, charges[i]);
    }


    // 编写自定义函数,创建标注
    function addMarker(point, data) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.addEventListener("click", function () {
            var p = marker.getPosition();  //获取marker的位置
            var infoWindow = new BMap.InfoWindow(htm(data));  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口

        });

    }


    function htm(data) {
        return '<div style="background-image: url(' +data.coverImg +')">'+
        '<fieldset class="layui-elem-field layui-field-title">' +
            '    <legend>' + data.stationName + '</legend>' +
            '</fieldset>'
            + '<blockquote class="layui-elem-quote">详细地址：' + data.address + '</blockquote>'
            + '<blockquote class="layui-elem-quote">充电站详情：' + data.stationDetails + '</blockquote>'
            + '<blockquote class="layui-elem-quote">区域：' + data.province + '</blockquote>' +
            '</div>'
    }


</script>
